<template>
    <van-loading color="red"  v-if="loading" class="pos"/>
    <div class="box" ref="box" v-else>
        <div class="mytop">
            <div @click="back">&lt; 返回</div>
            <div v-html="newsinfo.articleSource"></div>
            <div></div>
        </div>


        <div class="main">
            <h3 v-html="newsinfo.title" style="text-align: center"></h3>
            <div v-html="newsinfo.content" ref="myNewslist"></div>

            <van-image-preview v-model="show" :images="images" @change="onChange" maxZoom="3">
                <template v-slot:index>第{{ index+1 }}页</template>
            </van-image-preview>

        </div>

        <div class="fixbot">
            <div>阅读量:<span v-text="readNum"></span></div>
            <div>
                <van-badge :content="zan">
                    <van-icon name="good-job-o" size="30"  :color="zancolor" @click="like"/>
                </van-badge>
            </div>
            <div><van-icon name="star-o" size="30" :color="collectcolor" @click="collect"/></div>
        </div>

    </div>

</template>

<script>
    import {NewsInfo,like,collect,read} from '../api/api'
    import { Toast } from 'vant';
    export default {
        data() {
            return {
                zancolor:"black",
                collectcolor:"black",
                articleId:"",
                newsinfo:"",
                readNum:"",
                loading:true,
                show: false,
                index: 0,
                images: [
                ],
                zan:0
            };
        },





        methods:{
            onChange(index) {
                this.index = index;
            },
            // 返回上一页
            back(){
                this.$router.push({path:'/Collection'});
            },
            like(){
                like(this.articleId).then(res=>{
                    if(res.code==0){
                        Toast.success('点赞+1！');
                        this.zancolor="red";
                        this.zan=this.zan+1;
                        console.log(this.zan);
                    }
                })

            },
            collect(){
                if(this.newsinfo.isCollect){
                    console.log(1)
                    this.collectcolor="black";
                    collect(this.articleId).then(res=>{
                        if(res.code==0){
                            Toast('取消收藏');
                            this.newsinfo.isCollect=false;

                        }
                    })
                }else{
                    console.log(2)
                    this.collectcolor="red";
                    collect(this.articleId).then(res=>{
                        if(res.code==0){
                            Toast.success('收藏成功');
                            this.newsinfo.isCollect=true;

                        }
                    })
                }
            },
        },
        created(){

            this.articleId=this.$route.query.id;
            NewsInfo(this.articleId).then(res=>{
                this.newsinfo=res.data;
                console.log(this.newsinfo);
                this.zan=this.newsinfo.zan;
                if(this.zan>0){
                    this.zancolor="red";
                }

                if(this.newsinfo.isCollect){
                    this.collectcolor="red";
                }
                this.readNum=this.newsinfo.readNum;
                this.loading= false

            }),
                read(this.articleId).then(res=>{
                    console.log(res)
                })
        },


        mounted() {
            var that=this;
            setTimeout(()=>{
                this.$nextTick(function () {
                    let dom=this.$refs.myNewslist;
                    if(dom.querySelectorAll('img')){
                        let imgs=dom.querySelectorAll('img');
                        imgs.forEach((value)=>{
                            that.images.push(value.src); })
                        imgs.forEach((value,index)=>{
                            value.onclick=function () {
                                that.show = true;
                                that.index=index;
                            }
                        })
                    }


                })},500)

        }





























        // mounted() {
        //     var that=this;
        //     setTimeout(()=>{
        //         this.$nextTick(function () {
        //             let dom=this.$refs.myNewslist;
        //             console.log(this.$refs.myNewslist)
        //
        //             let imgs=dom.querySelectorAll('img');
        //             imgs.forEach((value)=>{
        //
        //                 value.onclick=function () {
        //                     console.log(value.src);
        //                     that.show = true;
        //                     console.log(that.$refs.myimg)
        //                     that.$refs.myimg.src = value.src
        //                     console.log(that.show)
        //                 }
        //             })
        //         })},5000)
        //
        // }
    }
</script>

<style scoped>
    .pos{
        position: absolute;
        top:48%;
        left:48%;
    }
    .mytop{
        display:flex;
        text-align: center;
        height:50px;
        line-height:50px;
        background-color: rgb(204, 0, 0);
        color:white;
    }
    .mytop>div:nth-child(1){
        width:60px;
    }
    .mytop>div:nth-child(2){
        width:calc(100% - 120px);
        font-size: 18px;
    }
    .mytop>div:nth-child(3){
        width:60px;
    }
    .main{
        padding:0 6px 60px;
    }
    /deep/ .main img{
        width:100%
    }
    .fixbot{
        width:100%;
        height:50px;
        line-height: 50px;
        position: fixed;
        bottom: 0;
        display: flex;
        background-color: white;
        align-items: center;
        border-top: 1px solid #ccc;

    }
    .fixbot>div{
        width:33%;
        text-align: center;
        line-height: 20px;

    }
    .van-cell{
        width: 100%;
        padding:0;
        overflow: hidden;
        color: #323233;
        font-size: 16px;
        line-height: 50px;
        background-color: white;
    }
</style>